export default {
  methods: {
    /**
     * 模板字符串类名生成器 - 核心功能（微信小程序兼容）
     * 用法：:class="$templateClass`grid-${maxPlayers} ${isActive ? 'active' : ''}`"
     * 注意：微信小程序不支持模板字符串，需要使用 $class() 方法
     */
    $templateClass(strings, ...values) {
      // 处理模板字符串
      let result = "";
      strings.forEach((string, i) => {
        result += string;
        if (values[i] !== undefined) {
          result += String(values[i]);
        }
      });
      return result.trim();
    },

    /**
     * 动态类名生成器（已废弃，微信小程序不支持在:class中调用方法）
     * 请使用以下方式：
     * 用法1：:class="'grid-' + maxPlayers" （直接字符串拼接）
     * 用法2：:class="['base-class', { active: isActive }]" （数组形式）
     * 用法3：:class="{ ['grid-' + maxPlayers]: true, active: isActive }" （对象形式，但动态key可能不支持）
     * @deprecated 微信小程序不支持在 :class 中直接调用方法，请使用字符串拼接或对象/数组字面量形式
     */
    $class(...args) {
      const classes = [];

      args.forEach((arg) => {
        if (!arg && arg !== 0) return;

        if (typeof arg === "string") {
          // 字符串直接添加
          classes.push(arg);
        } else if (Array.isArray(arg)) {
          // 数组递归处理
          const nestedClasses = this.$class(...arg);
          if (nestedClasses) {
            classes.push(nestedClasses);
          }
        } else if (typeof arg === "object") {
          // 对象：值为true的key被添加
          Object.keys(arg).forEach((key) => {
            if (arg[key]) {
              classes.push(key);
            }
          });
        }
      });

      return classes.join(" ").trim();
    },

    /**
     * 样式对象生成器（微信小程序兼容）
     * 用法：:style="$style({ width: width + 'px', height: height + 'px' })"
     * 用法：:style="$style({ backgroundImage: 'url(' + imageUrl + ')' })"
     */
    $style(styles) {
      if (!styles) return {};

      // 如果是字符串，尝试转换为对象（微信小程序不支持字符串形式的style）
      if (typeof styles === "string") {
        console.warn(
          "字符串形式的style在微信小程序中不支持，已自动转换为对象形式"
        );
        return this.$parseStyleString(styles);
      }

      // 对象形式 - 主要使用这个
      if (typeof styles === "object") {
        const result = {};
        Object.keys(styles).forEach((key) => {
          let value = styles[key];

          // 处理 null/undefined 值
          if (value === null || value === undefined) {
            return;
          }

          // 处理数值自动加px（可选的，根据你的需求）
          if (typeof value === "number" && this.shouldAddPx(key)) {
            value = value + "px";
          }

          // 转换驼峰为短横线（如：backgroundColor -> background-color）
          // 微信小程序需要短横线格式
          const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
          result[cssKey] = String(value);
        });
        return result;
      }

      return {};
    },

    /**
     * 背景图片样式生成器（已废弃，微信小程序不支持在:style中调用方法）
     * 请使用对象字面量形式：:style="{ backgroundImage: 'url(' + imageUrl + ')' }"
     * 或者：:style="{ backgroundImage: 'url(' + imageUrl + ')', backgroundSize: 'cover' }"
     * @deprecated 微信小程序不支持在 :style 中直接调用方法，请使用对象字面量形式
     */
    $bgImage(imageUrl, extraStyles = {}) {
      if (!imageUrl) {
        return this.$style(extraStyles);
      }

      const styles = {
        backgroundImage: `url(${imageUrl})`,
        ...extraStyles,
      };
      return this.$style(styles);
    },

    /**
     * 解析样式字符串为对象（辅助方法）
     */
    $parseStyleString(styleString) {
      const styleObj = {};
      if (!styleString) return styleObj;

      styleString.split(";").forEach((declaration) => {
        const [property, value] = declaration.split(":").map((s) => s.trim());
        if (property && value) {
          // 转换短横线格式为驼峰（用于对象key）
          const camelKey = property.replace(/-([a-z])/g, (g) =>
            g[1].toUpperCase()
          );
          styleObj[camelKey] = value;
        }
      });

      return styleObj;
    },

    /**
     * 判断哪些属性需要自动添加px单位
     */
    shouldAddPx(property) {
      const noPxProperties = [
        "zIndex",
        "opacity",
        "flex",
        "flexGrow",
        "flexShrink",
        "order",
        "zoom",
        "lineHeight",
        "fontWeight",
        "columnCount",
        "z-index",
        "opacity",
        "flex",
      ];
      return !noPxProperties.includes(property);
    },

    /**
     * 快速样式生成器（简化版）
     * 用法：:style="$quickStyle`width:${width}px;height:${height}px`"
     * 注意：微信小程序不支持模板字符串，建议直接使用 $style() 方法
     */
    $quickStyle(strings, ...values) {
      let styleString = "";
      strings.forEach((string, i) => {
        styleString += string;
        if (values[i] !== undefined) {
          styleString += String(values[i]);
        }
      });

      // 将字符串转换为对象
      return this.$parseStyleString(styleString);
    },
  },
};
